<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <th:block th:include="mall :: mall-css"/>
</head>
<body>
<!-- 顶部tab -->
<nav th:replace="mall::mall-header"></nav>
<!-- 首页导航栏 -->
<div class="top-nav bg3">
  <div class="nav-box inner">
    <div class="all-cat">
      <div class="title"><i class="iconfont icon-menu"></i> 全部分类</div>
      <div class="cat-list__box">
        <div class="cat-box" th:each="children : ${category.children}">
          <div class="title">
            <span th:text="${children.categoryName}"></span>
          </div>
          <div class="cat-list__deploy">
            <div class="deploy-box">
              <div class="genre-box clearfix" th:each="oneChildren : ${children.children}">
                <span class="title" th:text="${oneChildren.categoryName}+'：'"></span>
                <div class="genre-list">
                  <a href="" th:each="twoChildren : ${oneChildren.children}" th:text="${twoChildren.categoryName}"></a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <ul class="nva-list">
      <a href="index.html">
        <li class="active">首页</li>
      </a>
      <a href="">
        <li>企业简介</li>
      </a>
      <a href="">
        <li>品牌推荐</li>
      </a>
      <a href="">
        <li>企业账号</li>
      </a>
      <a href="">
        <li>诚信合约</li>
      </a>
      <a href="">
        <li>实时下架</li>
      </a>
    </ul>
    <div class="user-info__box">
      <div class="login-box">
        <div class="avt-port">
          <img src="images/icons/default_avt.png" alt="欢迎来到中维易购" class="cover b-r50">
        </div>
        <!-- 已登录 -->
        <div class="name c6">Hi~ <span class="cr">18759808122</span></div>
        <div class="point c6">积分: 30</div>

        <!-- 未登录 -->
        <!-- <div class="name c6">Hi~ 你好</div>
        <div class="point c6"><a href="">点此登录</a>，发现更多精彩</div> -->
        <div class="report-box">
          <span class="badge">+30</span>
          <a class="btn btn-info btn-block disabled" href="#" role="button">已签到1天</a>
          <!-- <a class="btn btn-primary btn-block" href="#" role="button">签到领积分</a> -->
        </div>
      </div>
      <div class="agent-box">
        <a href="#" class="agent">
          <i class="iconfont icon-fushi"></i>
          <p>申请网店代销</p>
        </a>
        <a href="javascript:;" class="agent">
          <i class="iconfont icon-agent"></i>
          <p><span class="cr">9527</span>位代销商</p>
        </a>
      </div>
      <div class="verify-qq">
        <div class="title">
          <i class="fake"></i>
          <span class="fz12">真假QQ客服验证-远离骗子</span>
        </div>
        <form class="input-group">
          <input class="form-control" placeholder="输入客服QQ号码" type="text">
          <span class="input-group-btn">
							<button class="btn btn-primary submit" id="verifyqq" type="button">验证</button>
						</span>
        </form>

      </div>
      <div class="tags">
        <div class="tag"><i class="iconfont icon-real fz16"></i> 品牌正品</div>
        <div class="tag"><i class="iconfont icon-credit fz16"></i> 信誉认证</div>
        <div class="tag"><i class="iconfont icon-speed fz16"></i> 当天发货</div>
        <div class="tag"><i class="iconfont icon-tick fz16"></i> 人工质检</div>
      </div>
    </div>
  </div>
</div>
<!-- 顶部轮播 -->
<div class="swiper-container banner-box">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><a th:href="@{/mall/product/list.html}"><img src="images/temp/banner_1.jpg" class="cover"></a></div>
    <div class="swiper-slide"><a th:href="@{/mall/product/list.html}"><img src="images/temp/banner_2.jpg" class="cover"></a></div>
    <div class="swiper-slide"><a th:href="@{/mall/product/list.html}"><img src="images/temp/banner_3.jpg" class="cover"></a></div>
    <div class="swiper-slide"><a th:href="@{/mall/product/list.html}"><img src="images/temp/banner_4.jpg" class="cover"></a></div>
    <div class="swiper-slide"><a th:href="@{/mall/product/list.html}"><img src="images/temp/banner_5.jpg" class="cover"></a></div>
  </div>
  <div class="swiper-pagination"></div>
</div>
<!-- 首页楼层导航 -->
<nav class="floor-nav visible-lg-block">
  <span class="scroll-nav active">品牌推荐</span>
  <span class="scroll-nav">爆款推荐</span>
  <span class="scroll-nav">新品推荐</span>
</nav>
<!-- 楼层内容 -->
<div class="content inner" style="margin-bottom: 40px;">
  <section class="scroll-floor floor-1 clearfix">
    <div class="pull-left">
      <div class="floor-title">
        <i class="iconfont icon-tuijian fz16"></i> 品牌推荐
        <a href="" class="more"><i class="iconfont icon-more"></i></a>
      </div>
      <div class="con-min-box">
        <a class="left-a-img hot-img" href="" th:each="brand,stat : ${brands}" th:if="${stat.count} <= 18">
          <img th:src="@{${brand.brandLogoUrl}}" alt="" class="cover">
        </a>
      </div>
    </div>
    <div class="pull-right">
      <div class="floor-title">
        <i class="iconfont icon-horn fz16"></i> 平台公告
        <a href="" class="more"><i class="iconfont icon-more"></i></a>
      </div>
      <div class="con-min-box">
        <div class="notice-box bgf5">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <a class="swiper-slide ep" href="">【公告】电商平台已上线，您还在等什么呢？是吧~</a>
              <a class="swiper-slide ep" href="">【资讯】P站服务器爆炸啦。国内86%地区IP被限制~</a>
              <a class="swiper-slide ep" href="">【公告】六趣公司9月底将彻底关闭66RPG论坛~</a>
              <a class="swiper-slide ep" href="">【资讯】Project1站将接盘66RPG，新域名rpg.blue</a>
              <a class="swiper-slide ep" href="">【新闻】央行决定对普惠金融实施定向降准政策 最高下调1.5个百分点</a>
              <a class="swiper-slide ep" href="">【新闻】那些年看的剧里十大虐心情节，谁戳中了你的泪点？</a>
              <a class="swiper-slide ep" href="">【新闻】惨遭魔改？派拉蒙将拍真人版《你的名字。》</a>
              <a class="swiper-slide ep" href="">【新闻】外媒称中国限制日本跟团游?旅行社:仍正常发团</a>
              <a class="swiper-slide ep" href="">【新闻】广电总局：电台电视台应在重要法定节日播放国歌</a>
              <a class="swiper-slide ep" href="">【新闻】高校性教育课成"爆款" 老师都讲哪些"大尺度"内容?</a>
              <a class="swiper-slide ep" href="">【新闻】vivo X20全面屏手机首销火爆 陈赫欧豪现身助力</a>
              <a class="swiper-slide ep" href="">【新闻】“拒绝妻子手术”现场医生：病人丈夫被冤枉了</a>
              <a class="swiper-slide ep" href="">【新闻】游客们注意了！国庆你要避开十大坑</a>
              <a class="swiper-slide ep" href="">【新闻】他卖了1.5万双假货，现在面临10年牢狱！</a>
              <a class="swiper-slide ep" href="">【新闻】10月1日起国家再次提高部分优抚对象抚恤补助标准 烈属抚恤每年23130元</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="scroll-floor floor-2">
    <div class="floor-title">
      <i class="iconfont icon-skirt fz16"></i> 爆款推荐
      <a href="" class="more"><i class="iconfont icon-more"></i></a>
    </div>
    <div class="con-box">
      <a class="left-img hot-img" href="">
        <img src="images/floor_2.jpg" alt="" class="cover">
      </a>
      <div class="right-box">
        <a th:href="@{'/mall/product/detail/'+${productRecommended.productId}}" class="floor-item" th:each="productRecommended,stat : ${productRecommendeds}" th:if="${stat.count} <= 8">
          <div class="item-img hot-img">
            <img th:src="@{${image.imageUrl}}" th:each="image,istat:${productRecommended.images}" th:if="${istat.count} < 2"
                 th:alt="${productRecommended.productName}" class="cover">
          </div>
          <div class="price clearfix">
            <s class="pull-left" th:text="'￥'+${productRecommended.retailPrice}"></s>
            <span class="pull-right cr fz16" th:text="'￥'+${productRecommended.currentPrice}"></span>
          </div>
          <div class="name ep" th:title="${productRecommended.productName}" th:text="${productRecommended.productName}"></div>
        </a>
      </div>
    </div>
  </section>
  <section class="scroll-floor floor-3">
    <div class="floor-title">
      <i class="iconfont icon-fushi fz16"></i> 新品推荐
      <a href="" class="more"><i class="iconfont icon-more"></i></a>
    </div>
    <div class="con-box">
      <a class="left-img hot-img" href="">
        <img src="images/floor_3.jpg" alt="" class="cover">
      </a>
      <div class="right-box">
        <a th:href="@{'/mall/product/detail/'+${productNew.productId}}" class="floor-item" th:each="productNew,stat : ${productNews}" th:if="${stat.count} <= 8">
          <div class="item-img hot-img">
            <img th:src="@{${image.imageUrl}}" th:each="image,istat:${productNew.images}" th:if="${istat.count} < 2"
                 th:alt="${productNew.productName}" class="cover">
          </div>
          <div class="price clearfix">
            <s class="pull-left" th:text="'￥'+${productNew.retailPrice}"></s>
            <span class="pull-right cr fz16" th:text="'￥'+${productNew.currentPrice}"></span>
          </div>
          <div class="name ep" th:title="${productNew.productName}" th:text="${productNew.productName}"></div>
        </a>
      </div>
    </div>
  </section>
</div>
<!-- 右侧菜单 -->
<div class="right-nav">
  <ul class="r-with-gotop">
    <li class="r-toolbar-item">
      <a href="" class="r-item-hd">
        <i class="iconfont icon-user"></i>
        <div class="r-tip__box"><span class="r-tip-text">用户中心</span></div>
      </a>
    </li>
    <li class="r-toolbar-item">
      <a href="" class="r-item-hd">
        <i class="iconfont icon-cart" data-badge="10"></i>
        <div class="r-tip__box"><span class="r-tip-text">购物车</span></div>
      </a>
    </li>
    <li class="r-toolbar-item">
      <a href="" class="r-item-hd">
        <i class="iconfont icon-aixin"></i>
        <div class="r-tip__box"><span class="r-tip-text">我的收藏</span></div>
      </a>
    </li>
    <li class="r-toolbar-item">
      <a href="" class="r-item-hd">
        <i class="iconfont icon-liaotian"></i>
        <div class="r-tip__box"><span class="r-tip-text">联系客服</span></div>
      </a>
    </li>
    <li class="r-toolbar-item">
      <a href="" class="r-item-hd">
        <i class="iconfont icon-liuyan"></i>
        <div class="r-tip__box"><span class="r-tip-text">留言反馈</span></div>
      </a>
    </li>
    <li class="r-toolbar-item to-top">
      <i class="iconfont icon-top"></i>
      <div class="r-tip__box"><span class="r-tip-text">返回顶部</span></div>
    </li>
  </ul>
</div>
<!-- 底部信息 -->
<nav th:replace="mall::mall-footer"></nav>
<th:block th:include="mall :: mall-js"/>
<script type="text/javascript">
  $(function () {
    $('#verifyqq').click(function () {
      DJMask.open({
        width: "400px",
        height: "150px",
        title: "中维易购提示您：",
        content: "<b>该QQ不是客服-谨防受骗！</b>"
      });
    });
  });

  $(document).ready(function () {
    // 顶部banner轮播
    var banner_swiper = new Swiper('.banner-box', {
      autoplayDisableOnInteraction: false,
      pagination: '.banner-box .swiper-pagination',
      paginationClickable: true,
      autoplay: 5000,
    });
    // 新闻列表滚动
    var notice_swiper = new Swiper('.notice-box .swiper-container', {
      paginationClickable: true,
      mousewheelControl: true,
      direction: 'vertical',
      slidesPerView: 10,
      autoplay: 2e3,
    });
    // 楼层导航自动 active
    $.scrollFloor();
    // 页面下拉固定楼层导航
    $('.floor-nav').smartFloat();
    $('.to-top').toTop({position: false});
  });
</script>
</body>
</html>